<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背包</title>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/aui.css"/>
    <link rel="stylesheet" href="css/shop.css">
    <link rel="stylesheet" href="css/alert.css">
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/mui.min.js"></script>
    <style>
        @media screen and (max-width:320px){
            .back_scroll_bg{height:56vh;}
            .back_order{height:60vh;}
        }
        @media screen and (min-width:376px) and (max-width:414px){
            .back_scroll_bg{height:66vh;}
            .back_order{height:70vh;}
        }

    </style>
    <script>
        function autoload(){
            var data={};
            data.user_id=user_id;
            $.ajax({
                
            })
        }
    </script>
    <script src="js/init.js"></script>
</head>
<body>
    <header class="mui-bar mui-bar-nav ">
        <a href="index2.html" class="mui-icon-undo mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title" id="page_title">{$data.page_title}</h1>
    </header>

    <div class="mui-content">
        <div class="re">
            <div class="ab" style="z-index:2;"><img id="user_tx" class="user_tx aui-mar-l-5" style="margin-top:-5px;width:50px;height:50px;" src="image/avatar.png" alt=""><img class="ab" style="right:0;bottom:5px;" src="image/sex1.png" alt="" width="12"></div>
            <div class="user aui-mar-t-10 f12 aui-col-10 hidden re" style="height:50px;line-height:1.6;">
                <div class="re" style="width:55%;">
                    <div class="user_bg ab" style="left:-10%;"></div>
                    <div class="ab aui-pad-t-5 aui-col-9 hidden" style="padding-left:70px;">
                        <div class="nowrap">小思设计2017小思</div>
                        <div class="nowrap" style="font-size:10px;">ID:123456</div>
                    </div>
                </div>
                <div class="user_jf ab" style="width:45%;">
                    <div class="user_bg ab" style="right:-10%;height:35px;"></div>
                    <a href="pay.html"><img class="ab" style="right:0;z-index:1;" src="images/rmb.png" alt="" width="35"></a>
                    <div class="ab aui-col-8 flex" style="padding:7px 0 0 10px;">
                        <div class="aui-col-5 flex hidden"><img class="vmid" src="images/xing.png" alt="" width="20">12348</div>
                        <div class="aui-col-4 flex hidden aui-pad-l-5"><img class="vmid" src="images/zuan.png" alt="" width="18">999</div>
                    </div>
                </div>
            </div>
        </div>
        <!--user信息-->

        <div class="aui-pad-10">
            <div class="icon mui-text-right">
                <img class="pack" src="images/beibao-icon.png" alt="" width="35">
                <img class="menu" src="images/back_dingdan.png" alt="" width="28">
                <img class="wait" src="images/back_daishou.png" alt="" width="28">
                <img class="addr" src="images/back_dizhi.png" alt="" width="28">
                <img class="song" src="images/back_zuanzeng.png" alt="" width="28">
                <img class="share" src="images/back_fenxiang.png" alt="" width="28">
            </div>
            <div class="flex f14 aui-pad-10 aui-border-radius" style="background:#fee630;box-shadow:3px 3px 3px #dab91e;">
                <div class="f1"><img class="vmid border-r-1 aui-pad-r-10" src="images/jiebao.png" alt="" height="30"></div>
                <div class="f5 border-r-1 hidden">
                    <img class="vmid fl aui-mar-r-10 aui-mar-l-5" src="images/jiangpin.png" alt="" height="30">
                    <marquee behavior="" direction="down" scrolldelay="200" style="line-height:16px;width:75%;height:30px;overflow: hidden;color:#d80000;display:block;float:left;">
                        <ul>
                            <li class="aui-mar-b-5 ellipsis">恭喜司马懿 在独闯江湖游戏中斩获冠军，获得一部iPhone7plus。</li>
                            <li class="aui-mar-b-5 ellipsis">恭喜司马懿 在独闯江湖游戏中斩获冠军，获得一部iPhone7plus。</li>
                            <li class="aui-mar-b-5 ellipsis">恭喜司马懿 在独闯江湖游戏中斩获冠军，获得一部iPhone7plus。</li>
                        </ul>
                    </marquee>
                </div>
                <div class="f1 mui-text-right f12" style="line-height:30px;">更多</div>
            </div>
            <!--江湖捷报-->
            <!--<div class="aui-mar-t-10"><img class="aui-col-10" src="images/duobao.png" alt=""></div>-->
        </div>

        <div class="backbox aui-col-10 mui-text-center fix " style="left:0;bottom:0;">
            <ul class="back_nav select ab mui-text-center aui-col-10 flex" style="top:-35px;">
                <li class="action">商品</li>
                <li class="">礼物</li>
                <li class="">其他</li>
            </ul>
            <div class="scroll back_scroll_bg">
                <ul class="f14" style="height:95%;overflow-y: auto;">
                    <li><img class="aui-col-10" src="images/shop.png" alt="" ></li>
                    <li><img class="aui-col-10" src="images/shop.png" alt="" ></li>
                    <li><img class="aui-col-10" src="images/shop.png" alt="" ></li>
                    <li><img class="aui-col-10" src="images/shop.png" alt="" ></li>
                    <li><img class="aui-col-10" src="images/shop.png" alt="" ></li>
                </ul>
                <ul class="f14 none" style="height:95%;overflow-y: auto;">
                    <li><img class="aui-col-10" src="images/shop2.png" alt="" ></li>
                    <li><img class="aui-col-10" src="images/shop.png" alt="" ></li>
                    <li><img class="aui-col-10" src="images/shop.png" alt="" ></li>
                    <li><img class="aui-col-10" src="images/shop.png" alt="" ></li>
                    <li><img class="aui-col-10" src="images/shop.png" alt="" ></li>
                </ul>
                <ul class="f14 none" style="height:95%;overflow-y: auto;">
                    <li><img class="aui-col-10" src="images/shop.png" alt="" ></li>
                    <li><img class="aui-col-10" src="images/shop.png" alt="" ></li>
                    <li><img class="aui-col-10" src="images/shop.png" alt="" ></li>
                    <li><img class="aui-col-10" src="images/shop.png" alt="" ></li>
                    <li><img class="aui-col-10" src="images/shop.png" alt="" ></li>

                </ul>
            </div>
        </div>
        <!--背包列表-->
    </div>

    <div class="menubox back_order aui-pad-15 none">
        <div class="box_title ab mui-text-center">我的订单</div>
        <ul class="f12 aui-pad-10 aui-mar-t-20" style="height:90%;overflow-y: auto;">
            <li class="mui-row aui-border-b-gray aui-pad-10">
                <div class="mui-col-sm-9 mui-col-xs-9">
                    <div class="f12 aui-pad-b-5">购买时间：2017年11月11日 22:00</div>
                    <div>
                        <img class="aui-background-gray aui-mar-r-10 fl" src="" alt="" width="60" height="60">
                        <div>
                            <div><b>商品名称</b></div>
                            <div>煮酒论英雄·独闯江湖·8人模式</div>
                            <div><span>总价:<img class="vmid" src="images/zuan.png" alt="" width="15"><span class="aui-color-red">288</span></span> <span class="aui-pad-l-10">人均: <img class="vmid" src="images/zuan.png" alt="" width="15"><span class="aui-color-red">288</span></span></div>
                        </div>
                    </div>
                </div>
                <div class="mui-col-sm-3 mui-col-xs-3 mui-text-center">
                    <div class="mui-text-right aui-color-gray">未发货</div>
                    <div class="orange_btn aui-mar-t-15" style="width:90%;margin-left:10%;">发货</div>
                </div>
            </li>

        </ul>
    </div>
    <!--订单-->

    <div class="waitbox back_order aui-pad-15 none">
        <div class="box_title ab mui-text-center">待发货</div>
        <ul class="f12 aui-pad-10 aui-mar-t-20" style="height:90%;overflow-y: auto;">
            <li class="mui-row aui-border-b-gray aui-pad-10">
                <div class="mui-col-sm-9 mui-col-xs-9">
                    <div class="f12 aui-pad-b-5">购买时间：2017年11月11日 22:00</div>
                    <div>
                        <img class="aui-background-gray aui-mar-r-10 fl" src="" alt="" width="60" height="60">
                        <div>
                            <div><b>商品名称</b></div>
                            <div>煮酒论英雄·独闯江湖·8人模式</div>
                            <div><span>总价:<img class="vmid" src="images/zuan.png" alt="" width="15"><span class="aui-color-red">288</span></span> <span class="aui-pad-l-10">人均: <img class="vmid" src="images/zuan.png" alt="" width="15"><span class="aui-color-red">288</span></span></div>
                        </div>
                    </div>
                </div>
                <div class="mui-col-sm-3 mui-col-xs-3 mui-text-center">
                    <div class="mui-text-right aui-color-gray">未发货</div>
                    <div class="orange_btn aui-mar-t-15" style="width:90%;margin-left:10%;">查看物流</div>
                </div>
            </li>
        </ul>
    </div>
    <!--待发货-->

    <div class="zhuanzeng back_order aui-pad-15 none">
        <div class="box_title ab mui-text-center">转增记录</div>
        <div class="toggle_btn f14 hidden mui-text-center aui-mar-t-20">
            <div class="action">收到记录</div>
            <div>送出记录</div>
        </div>
              <!--收到记录-->
        <div class="zuze" style="height:90%;overflow-y: auto;">
            <ul class="f12 aui-pad-l-10" >
                <li class="aui-border-b-gray aui-pad-10">
                    <div class="f12 aui-pad-b-5">来自 <img class="aui-border-rasius-y vmid" src="image/avatar.png" alt="" width="20">司马懿的商品/礼物/其他</div>
                    <div class="mui-row">
                        <div class="mui-col-sm-3 mui-col-xs-3">
                            <img class="aui-background-gray fl" src="" alt="" width="60" height="60">
                        </div>
                        <div class="mui-col-sm-9 mui-col-xs-9">
                            <div><b>商品名称</b></div>
                            <div>煮酒论英雄·独闯江湖·8人模式</div>
                            <div><span>总价:<img class="vmid" src="images/zuan.png" alt="" width="15"><span class="aui-color-red">288</span></span> <span class="aui-pad-l-10">人均: <img class="vmid" src="images/zuan.png" alt="" width="15"><span class="aui-color-red">288</span></span></div>
                        </div>
                    </div>
                </li>
            </ul>
                     <!--送出记录-->
            <ul class="f12 aui-pad-l-10 none" style="height:90%;overflow-y: auto;">
                <li class="aui-border-b-gray aui-pad-10">
                    <div class="f12 aui-pad-b-5">来自 <img class="aui-border-rasius-y vmid" src="image/avatar.png" alt="" width="20">司马懿的商品/礼物/其他</div>
                    <div class="mui-row">
                        <div class="mui-col-sm-3 mui-col-xs-3">
                            <img class="aui-background-gray fl" src="" alt="" width="60" height="60">
                        </div>
                        <div class="mui-col-sm-9 mui-col-xs-9">
                            <div><b>商品名称2</b></div>
                            <div>煮酒论英雄·独闯江湖·8人模式</div>
                            <div><span>总价:<img class="vmid" src="images/zuan.png" alt="" width="15"><span class="aui-color-red">288</span></span> <span class="aui-pad-l-10">人均: <img class="vmid" src="images/zuan.png" alt="" width="15"><span class="aui-color-red">288</span></span></div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--转增记录-->

    <div class="sharebox back_order aui-pad-15 none">
        <div class="box_title ab mui-text-center">分享记录</div>
        <ul class="f12 aui-pad-l-10 aui-mar-t-20" style="height:90%;overflow-y: auto;">
            <li class="aui-border-b-gray aui-pad-10">
                <div class="f12 aui-pad-b-5">来自 <img class="aui-border-rasius-y vmid" src="image/avatar.png" alt="" width="20">司马懿的商品/礼物/其他</div>
                <div class="mui-row">
                    <div class="mui-col-sm-3 mui-col-xs-3">
                        <img class="aui-background-gray fl" src="" alt="" width="60" height="60">
                    </div>
                    <div class="mui-col-sm-7 mui-col-xs-7">
                        <div><b>商品名称2</b></div>
                        <div>煮酒论英雄·独闯江湖·8人模式</div>
                        <div><span>总价:<img class="vmid" src="images/zuan.png" alt="" width="15"><span class="aui-color-red">288</span></span> <span class="aui-pad-l-10">人均: <img class="vmid" src="images/zuan.png" alt="" width="15"><span class="aui-color-red">288</span></span></div>
                    </div>
                    <div class="mui-col-sm-2 mui-col-xs-2 aui-color-gray">分享至微博</div>
                </div>
            </li>
        </ul>
    </div>
    <!--分享-->

    <div class="myaddress back_order aui-pad-15 none">
        <div class="box_title ab mui-text-center">我的地址</div>
        <div style="height:90%;">
            <div class="manage f14 mui-text-right aui-pad-r-15 line-height-2">管理</div>
            <div class="edit f14 mui-text-right aui-pad-r-15 line-height-2 none"><span class="edit_btn">编辑</span> <span class="aui-color-red aui-pad-l-10">删除</span></div>
            <ul class="f12 aui-pad-l-10" style="height:90%;overflow-y: auto;">
                <li class="aui-border-b-gray aui-pad-5">
                    <div class="flex">
                        <div class="f1 checkbox none"><input class="aui-mar-t-15" type="checkbox"></div>
                        <div class="edit_con">
                            <div class="mui-row line-height-2">
                                <div class="mui-col-sm-8 mui-col-xs-8">司马懿</div>
                                <div class="mui-col-sm-4 mui-col-xs-4">15963514465</div>
                            </div>
                            <div><span class="aui-color-red">[默认地址]</span>河南省安阳市文峰区中华路万达写字楼</div>
                        </div>
                    </div>
                </li>
                <li class="aui-border-b-gray aui-pad-5">
                    <div class="flex">
                        <div class="f1 checkbox none"><input class="aui-mar-t-15" type="checkbox"></div>
                        <div class="edit_con">
                            <div class="mui-row line-height-2">
                                <div class="mui-col-sm-8 mui-col-xs-8">司马懿</div>
                                <div class="mui-col-sm-4 mui-col-xs-4">15963514465</div>
                            </div>
                            <div><span class="aui-color-red">[默认地址]</span>河南省安阳市文峰区中华路万达写字楼</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
              <!--管理-->
        <div class="newaddress fix mui-text-center aui-background-orange aui-color-white line-height-3 f14 aui-col-10" style="left:0;bottom:0;">新增收货地址</div>
    </div>
    <!--管理地址-->

    <div class="newadd back_order aui-pad-15 none">
        <div class="box_title ab mui-text-center">新增地址</div>
        <div style="height:90%;">
            <div class="save f14 mui-text-right aui-pad-r-15 line-height-2">保存</div>
            <ul class="f14 aui-pad-l-10" style="height:90%;overflow-y: auto;">
                <li class="flex line-height-3"><div class="f1">收货人</div><div class="f4"><input type="text"></div></li>
                <li class="flex line-height-3"><div class="f1">联系电话</div><div class="f4"><input type="text" maxlength="11"></div></li>
                <li class="flex line-height-3 re"><div class="f1">所在地区</div><div class="f4"><input type="text"></div><span class="ab reri aui-color-gray f12">请选择></span></li>
                <li class="flex line-height-3 re"><div class="f1">街道</div><div class="f4"><input type="text"></div> <span class="ab reri aui-color-gray f12">请选择></span></li>
                <li class="flex line-height-3"><input type="text" placeholder="请填写详细地址"></li>
                <li class="flex line-height-3 re">设为默认 <input class="ab reri retop" type="checkbox" checked="checked"></li>
            </ul>

        </div>
    </div>
    <!--新增地址-->

    <!--alert开始-->
    <div class="alert none">
        <div class="shanpin_detail box mui-text-center re none">
            <img class="user_tx ab aui-border-rasius-y" src="images/1.jpg" alt="" width="80" height="80">
            <div class="f15 aui-pad-b-5"><b>Mac book pro 8G 固态硬盘256G</b></div>
            <div class="f14 aui-pad-b-10">煮酒论英雄·独闯江湖 8人模式</div>
            <div class="f12 mui-text-left" style="height:65px;overflow-y:auto; padding:0 10px;">证书编号：2016010902914390证书状态：有效产品名称：笔记型电脑3C规格型号：A1708：20.3V 3.0A 最大 （电源适配器：A1718，电线组件可选）产品名称：Apple/苹果 无机械硬盘内存容量: 8GB操作系统: Mac OS.</div>
            <div class="f12 aui-pad-t-15">
                <span class="aui-pad-r-5">商品总价:<img src="images/zuan.png" alt="" width="14"><span class="aui-color-red">8888积分</span></span>
                <span>人均消耗:<img src="images/zuan.png" alt="" width="14"><span class="aui-color-red">68积分</span></span>
            </div>
            <img class="shanpin_yes aui-col-4 aui-pad-t-10" src="images/tc_queding.png" alt="">
        </div>
        <!--商品 礼物详情-->

        <div class="user_info box f14 mui-text-center re none">
            <img class="user_tx ab aui-border-rasius-y" src="image/avatar.png" alt="" width="80" height="80">
            <div style="overflow:hidden;">
                <div class="aui-pad-b-5"><img class="aui-mar-r-10" src="image/sex1.png" alt="" width="14"><b>司马懿</b> <span class="f12">ID:999</span></div>
                <div class="mui-row aui-pad-10 line-height-2 mui-text-left">
                    <div class="mui-col-sm-7 mui-col-xs-7">
                        <div>段位：绿蓝带</div>
                        <div>胜率：77%</div>
                    </div>
                    <div class="mui-col-sm-5 mui-col-xs-5">
                        <div>幸运：9999</div>
                        <div>人气：999</div>
                    </div>
                </div>
                <div class="yes orange_btn auto">确定</div>
            </div>
        </div>
        <!--用户信息-->

    </div>
    <!--alert end-->
</body>
<script src="js/backpack.js"></script>
</html>